<template>
	<view>
		<!-- <u-navbar :is-back="true" :is-fixed="true" title="编辑产品"></u-navbar> -->
		<scroll-view scroll-y scroll-with-animation style="height: calc(100vh - 60px);" :show-scrollbar="false">
			<view style=" background-color:#EFEDE9;">
				<view class="pl-2 pr-2 font-14 lineHight-40 font-weight-bold">服务信息</view>
			</view>
			<view class="pl-3 pr-2">
				<u-form :model="form" ref="uForm">

					<!-- <u-form-item required style="padding-right: 10px;" :label-style="labelStyle" label="产品名称">
						<u-input @v-model="valueListCp" placeholder="请选择" :value="form.productName" :type="type"
							input-align="right" :border="false" @click="showListCp = true" />
						<u-action-sheet :list="actionListCp" v-model="showListCp"
							@click="actionClickListCp"></u-action-sheet>
					</u-form-item> -->
					<u-form-item style="padding-right: 10px;" required label-width="180" label="产品名称"
						prop="productInformId">
						<u-input @v-model="valueListCp" placeholder="请选择产品名称" :value="form.productName" :type="type"
							input-align="right" :border="false" @click="valueListCpHandler" />
						<u-picker @confirm="selectValueListCp" mode="selector" v-model="selectValueListCpBusiness"
							:default-selector="[0]" :range="valueListCpBusinessList" range-key="text"></u-picker>
					</u-form-item>

					<u-form-item required :label-style="labelStyle" label="产品品类" prop="productTypeName">
						<u-input class="mr-3 " v-model="form.productTypeName" :disabled="true" input-align="right" />
					</u-form-item>
					<u-form-item required :label-style="labelStyle" label="数量" prop="productNumber">
						<u-input class="mr-3 " v-model="form.productNumber" input-align="right" />
						<text class="mr-3 ">{{form.productSpecsText || form.productSpecs}}</text>
					</u-form-item>
					<u-form-item required :label-style="labelStyle" label="企业名称" prop="enterpriseName">
						<u-input class="mr-3 " v-model="form.enterpriseName" :disabled="true" input-align="right" />
					</u-form-item>
		
					<u-form-item required :label-style="labelStyle" label="产品季节时间" prop="productEndTime">
						<view class="example-body position-absolute right-1">
							<!-- date/daterange/datetime/datetimerange -->
							<uni-datetime-picker v-model="range2" type="daterange" rangeSeparator="至" />
						</view>
					</u-form-item>

					<u-form-item style="padding-right: 10px;" required label-width="180" label="基地名称"
						prop="productInformId">
						<u-input @v-model="valueProductName" placeholder="请选择基地名称" :value="form.baseName" :type="type"
							input-align="right" :border="false" @click="showNatureBusinessHandler" />
						<u-picker @confirm="selectNatureBusiness" mode="selector" v-model="showNatureBusiness"
							:default-selector="[0]" :range="natureBusinessList" range-key="text"></u-picker>
					</u-form-item>

					<u-form-item required :label-style="labelStyle" label="基地地址" prop="baseAddress">
						<u-input class="mr-3 " v-model="form.baseAddress" :disabled="true" input-align="right" />
					</u-form-item>
					<u-form-item required :label-style="labelStyle" label="联系人" prop="baseContacts">
						<u-input class="mr-3 " v-model="form.baseContacts" :disabled="true" input-align="right" />
					</u-form-item>
					<u-form-item required :label-style="labelStyle" label="联系电话" prop="basePhone">
						<u-input class="mr-3 " v-model="form.basePhone" :disabled="true" input-align="right" />
					</u-form-item>
					<view style=" background-color:#EFEDE9;">
						<view class="pl-2 pr-2 font-14 lineHight-40 font-weight-bold">上/下架状态</view>
					</view>
					<u-form-item required style="padding-right: 10px;" :label-style="labelStyle" label="上/下架状态"
						prop="name">
						<u-input v-model="productStatusLabel" :type="type" input-align="right" :border="false"
							@click="showListIp = true" />
						<u-action-sheet :list="productStatus" v-model="showListIp"
							@click="actionSheetCallback"></u-action-sheet>
					</u-form-item>
				</u-form>
			</view>
			<ferrButton title="编辑" @click="submit"></ferrButton>
		</scroll-view>
	</view>
</template>

<script>
	import $H from '@/common/free-lib/request.js';
	import ferrButton from "@/components/free-ui/ferr-button.vue";
	// import calendar from "@/uni_modules/uni-calendar/components/uni-calendar/uni-calendar.vue"
	// import calendars from "@/uni_modules/uni-calendars/components/uni-calendar/uni-calendar.vue";
	export default {
		components: {
			ferrButton,
			// calendar,
			// calendars
		},

		data() {
			return {
				form: {
					productNameId: '',
					productTypeName: '',
					productNumber: '',
					baseName: '',
					productStartTime: '',
					baseId: '',
					baseContacts: '',
					basePhone: '',
					productStatus: '',
					productSpecs: '',
					baseAddress: '',
					productName: '',
					productSpecsText: ''
				},
				valueList: '',
				valueListCp: '',
				type: 'select',
				showData: false,
				selectedDate: null,
				selectedDateTime: null,
				showListIp: false,

				showListCp: false,
				border: true,
				labelStyle: {
					width: '130px'
				},
				actionListCp: [],
				productStatus: [{
						text: '上架',
						value: 0
					},
					{
						text: '下架',
						value: 1
					},
				],
				rules: {
					productNumber: [{
						validator: (rule, value, callback) => {
							const reg = /^[0-9]+(\.[0-9]+)?$/; // 允许输入整数和小数
							if (!reg.test(value)) {
								callback(new Error('请输入数字'));
							} else {
								callback();
							}
						},
						trigger: ['change', 'blur'],
					}]
				},

				valueListCpBusinessList: [],
				selectValueListCpBusiness: false,

				valueProductName: '',
				showNatureBusiness: false,
				natureBusinessList: [],
				// range2:['2024-06','2024-12']
				range2: []
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(options) {
			const id = options.id;
			this.NewListDetail(id);
			this.productName();
			this.getBaseInformAllList();
		},
		computed: {
			productStatusLabel() {
				return this.form.productStatus === 0 ? '上架' : '下架';
			}
		},
		methods: {
			// 默认值
			NewListDetail(id) {
				$H.get('/agriculture/productInform/queryById', {
					id: id
				}, {}).then(res => {
					let result = res.result
					let start = result.productStartTime.split('-')
					let end = result.productEndTime.split('-')
					start = start[0] + '-' + start[1] + '-' + start[1]
					end = end[0] + '-' + end[1] + '-' + end[1]
					this.form = result
					this.range2 = [start, end]
				}).catch(error => {
					uni.showToast({
						title: "网络错误，请稍后再试",
						icon: 'none'
					});
				});
			},
			// 产品名称
			valueListCpHandler() {
				this.selectValueListCpBusiness = true;
			},
			selectValueListCp(e) {
				this.valueListCp = this.valueListCpBusinessList[e[0]].text;
				this.form.productNameId = this.valueListCpBusinessList[e[0]].id,
					this.form.productTypeName = this.valueListCpBusinessList[e[0]].productTypeName;
				this.form.productSpecsText = this.valueListCpBusinessList[e[0]].productSpecsText;
				this.form.productName = this.valueListCpBusinessList[e[0]].text;
				this.form.productNumber = this.valueListCpBusinessList[e[0]].productNumber;
				this.form.productSpecs = this.valueListCpBusinessList[e[0]].productSpecs;
			},
			productName() {
				$H.get(
					`/basisInform/productName/list`, {}, {}
				).then((res) => {
					this.valueListCpBusinessList = (res.result.records || []).map((v) => {
						return {
							text: v.productName,
							id: v.id,
							productTypeName: v.productTypeId_dictText,
							productNumber: v.productSpecs,
							productSpecs: v.productSpecs,
							productSpecsText: v.productSpecsText,
							productTypeName: v.productTypeName,
						}
					})
					const target = this.valueListCpBusinessList.find(
						(v) => v.id === this.form.id
					)
					this.valueProductName = target ? target.text : ''
				})
			},


			// 基地名称
			showNatureBusinessHandler() {
				this.showNatureBusiness = true;
			},
			selectNatureBusiness(e) {
				this.valueProductName = this.natureBusinessList[e[0]].text;
				this.form.baseId = this.natureBusinessList[e[0]].id;
				this.form.baseAddress = this.natureBusinessList[e[0]].baseAddress;
				this.form.baseContacts = this.natureBusinessList[e[0]].baseContacts
				this.form.basePhone = this.natureBusinessList[e[0]].basePhone
				this.form.baseName = this.natureBusinessList[e[0]].text
			},
			getBaseInformAllList() {
				$H.get(
					`/agriculture/baseInform/getBaseInformAllList`, {}, {}
				).then((res) => {
					this.natureBusinessList = (res.result || []).map((v) => {
						return {
							text: v.baseName,
							id: v.id,
							baseAddress: v.baseAddress,
							baseContacts: v.contacts,
							basePhone: v.phone,

						}
					})
					const target = this.natureBusinessList.find(
						(v) => v.id === this.form.baseId
					)
					this.valueProductName = target ? target.text : ''
				})
			},


			// 上架状态回调函数
			actionSheetCallback(index, item) {
				this.valueList = this.productStatus[index].text;
				this.form.productStatus = this.productStatus[index].value;
				this.form.productStatus = item.value;
				this.showListIp = false;
			},

			// 编辑
			submit() {
				this.$refs.uForm.validate(valid => {
					// 时间返回处理
					let dateArr = this.range2
					dateArr = dateArr.map(v => {
						if (v.indexOf('-') !== -1) {
							v = v.split('-').join('')
						}
						return v
					})
					if (valid) {
						let o = {
							...this.form,
							productStatus: this.form.productStatus,
							productNameId: this.form.productNameId,
							productStartTime: dateArr[0].slice(0, 4) + '-' + dateArr[0].slice(4, 6),
							productEndTime: dateArr[1].slice(0, 4) + '-' + dateArr[1].slice(4, 6)
						}
						$H.post(`/agriculture/productInform/agriculture/edit`, o, {})
							.then((res) => {
								if (res.code === 200) {
									uni.showToast({
										title: res.message,
										icon: 'none',
										duration: 4000
									})
									setTimeout(() => {
										uni.navigateBack({
											delta: 1
										});
									}, 4000);
								} else {
									uni.showToast({
										title: res.message,
										icon: 'none',
									})
								}
							})
							.catch(() => {
								uni.showToast({
									title: '编辑失败',
									icon: 'none',
								})
							})
					} else {
						uni.showToast({
							title: "请完整填写表单",
							icon: 'none'
						});
					}
				}, );
			}
		}
	}
</script>

<style>
</style>